<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Shadows</title>
<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.shadow.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen">



<style type="text/css" media="all">

body
{
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.draggable {
	width: 180px;
	height: 80px;
	padding: 5px;
	background: red;
	color: #fff;
	position: absolute; top: 100px; left: 500px;
	z-index: 6;
}

</style>
</head>
<body class="flora">
	<fieldset style='height: 500px;'>
	<legend>Dynamic Shadows</legend>

<div class="ex draggable">Bla</div>

<img class="ex" src="images/bamboo.jpg">

<div style="position: absolute; background: green; top: 100px; left: 500px; width: 50px; height: 600px; z-index: 5;"></div>

	</fieldset>


<script type="text/javascript">
$(window).bind("load",function(){

	$(".ex").draggable().shadow({ offset: 10, color: "blue", opacity: 0.2 });
	$("div.draggable").resizable();

});
</script>

</body>
</html>

